<template>
  <!-- 发布资讯页面 -->
  <div class="disclosing">
    <!-- 头部 -->
    <div class="header">
      <!-- 标题 -->
        <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm_list"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title" size="small " style="width:50%">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <!-- 分类 -->
        <el-form-item label="分类" prop="categoryId">
          <el-select v-model="ruleForm.categoryId" size="small " clearable placeholder="请选择栏目">
          <el-option
            v-for="providing in ProvidingData.filter((item) => !item.parentId)"
            :key="providing.id"
            :label="providing.name"
            :value="providing.id"
          ></el-option>
        </el-select>
        </el-form-item>
      <!-- </el-form> -->
      <!-- 图片 -->
      <el-form-item label="封面" prop="cover">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          >
            <img v-if="imageUrl" :src="ruleForm.cover" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
           <p>图片大小不能超过 3M</p>
        </el-form-item>
        <!-- 富文本 -->
    <el-form-item label="正文" prop="content">
    <div class="components-container">
      <a
        target="_blank"
        class="link-type"
        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html"
      ></a>
    <div>
      <tinymce v-model="ruleForm.content" :height="300" />
    </div>
  </div>
    </el-form-item>
        </el-form>
    </div>
    <!-- 主体内容 -->
    <!-- 富文本
    <div class="components-container">
      <a
        target="_blank"
        class="link-type"
        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html"
      ></a>
    <div>
      <tinymce v-model="content_1" :height="300" />
    </div>
  </div> -->
    <!-- 底部 -->
    <div class="foot" style="margin-right:50px;float:right">
      <el-button size="small" @click="fanhui">返回</el-button>
      <el-button type="success" size="small" @click="SuBmint">发布</el-button>
    </div>

  </div>
</template>

<script>
// 引入axios
import { post } from "@/utils/request";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
// 引入文件上传路径 和 文件预览的路径
import {showFileURL, uploadFileURL} from '@/utils/config'
import Tinymce from "@/components/Tinymce";
export default {
  name: "TinymceDemo",
  components: { Tinymce },
  data() {
    return {
       // 上传文件的服务器地址
      uploadFileURL,
      // 表单正则表达式
       ruleForm: {
          title: '',
          categoryId: '',
          cover:'',
          content:'',
        },
        rules: {
          title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
          categoryId: [
            { required: true, message: '请选择栏目', trigger: 'change'}
          ],
          content:[
            {required: true, message: '请填写内容', trigger: 'blur'}
          ]
        },
      // 下拉栏目状态
      providingCategory: [],
      // 图片路径
      imageUrl: "",
      // 富文本内容
      //content:""
    };
  },
  computed: {
    // 使用辅助函数
    ...mapState("providing", ["ProvidingData"]),
  },
  methods: {
    // ...mapActions('category模块的文件名',['对应的方法'])
    ...mapActions("providing", ["getAllProvidData"]),
    //vuex查询数据
    queryCategoryData() {
      // 定义参数
      let data = {
        page: 1,
        pageSize: 100,
      };
      // 调用vuex中定义好的方法
      this.getAllProvidData(data);
    },

    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 上传成功之后 更新productForm.photo的路径
      this.ruleForm.cover = showFileURL + res.data.id
    },
    /**
     * @description: 上传之前 要做的一些限制
     * @param {*} file
     * @return {*}
     * @author: ZachGmy
     */
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传图片大小不能超过 3MB!");
      }
    },
    // 返回按钮
    fanhui(){
      this.$router.go(-1);
    },
    // 发布按钮
    SuBmint(){
     this.$refs['ruleForm_list'].validate(async (valid) => {
        if (valid) {
          //console.log(this.ruleForm);
          // 发送表单验证的请求 提交表单对象
          let res = await post('/article/saveOrUpdate', this.ruleForm)
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
        }
        this.$router.go(-1);
        }
     })
    },
  },
  created() {
    // 自动获取数据
    this.queryCategoryData();
  },
  mounted() {},
};
</script>
<style scoped>
/* .editor-content {
  margin-top: 20px;
} */
</style>
